<template>
  <side-bar ref="sidebar">
    <!-- <my-div> -->
      <my-div class="wallet" day_bg="#f5f6fa" night_bg="#000000">
        <head title="钱包" :back="false" bgcolor="rgba(70,120,245,1)">
          <div slot="left" @click="toggleSidebar">
            <image style="width: 36px;height: 30px" :src="`root:img/${theme}/my/sidebar@2x.png`"></image>
          </div>
          <!-- <div class="title" slot="title">
            <image style="width: 38px;height: 38px" src="root:img/home/search-icon@2x.png"></image>
          </div> -->
          <div slot="right" style="width: 36;height: 36">
            <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
          </div>
        </head>
        <div class="account-wrapper">
          <my-div day_bg="rgba(246,249,255,1)" night_bg="rgba(143,77,8,1)" class="account">
              <div class="account-label">
                <div class="account-avatar">

                </div>
                <my-text day_color="rgba(60,71,98,1)" night_color="#fff" :text="current_user.name" class="account-name"></my-text>
              </div>
              <div class="account-code">
                <my-text day_color="rgba(60,71,98,1)" night_color="#fff" :text="current_wallet.name" class="account-code-id"></my-text>
                <my-text :text="current_wallet.account_id" class="account-code-sub"></my-text>
              </div>
              <image class="account-secret" style="width:35px;height:40px;" src=""></image>
          </my-div>
          <scroller :show-scrollbar="false">
            <!-- <recycle-list for="(item, i) in accountList" > -->
              <!-- <cell-slot> -->
                <my-div class="wallet-wrapper" v-for="item of user_wallets" :key="item">
                  <my-text day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)" :text="`${item.name}/${item.companyName}`" class="city-name"></my-text>
                  <div class="city-label">
                    <div style="width:325px;">
                      <text class="city-label-name">{{$t('wallet.may_use')}}</text>
                      <my-text :text="item.total" class="city-label-count"></my-text>
                    </div>
                    <div style="width:325px;">
                      <text class="city-label-name">{{$t('wallet.lock_house')}}</text>
                      <my-text :text="item.lock" class="city-label-count"></my-text>
                    </div>
                  </div>
                  <div class="operate">
                    <text class="operate-transfer" @click="turn_in(item.name)">{{$t('wallet.change_into')}}</text>
                    <text class="operate-put" @click="turn_out(item.name,item.companyName)">{{$t('wallet.turn_out')}}</text>
                    <div @click="record(item)">
                      <my-text day_color="rgba(60,71,98,1)" night_color="rgba(184,111,36,1)" :text="$t('wallet.bill')" class="operate-account" ></my-text>
                    </div>
                  </div>
                </my-div>
              <!-- </cell-slot> -->
            <!-- </recycle-list> -->
          </scroller>
        </div>
      </my-div>
  <!-- </my-div> -->
  <tab-bar @tabTo="onTabTo" :pIndexKey="2"></tab-bar>
  </side-bar>
</template>
<style scoped>
.wallet{
  flex: 1;
}
.account{
  width: 690px;
  margin-left: 30px;
  height: 200px;
  /* box-shadow: 0px 3px 30px 0px rgba(70,120,245,0.15); */
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 20px;
  padding-left: 40px;
  margin-block-end: 36px;
}
.account-label{
  padding-right: 40px;
  margin-right: 40px;
  height: 140px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(233,233,233);
}
.account-avatar{
  width: 80px;
  height: 78px;
}
.account-name{
  font-size: 24px;
  margin-top: 8px;
}
.account-code-id{
  font-size: 36px;
}
.account-code-sub{
  font-size: 20px;
  color: rgb(154,156,164);
  margin-top:24px;
}
.account-secret{
  position: absolute;
  right: 20px;
  top: 20px;
}
.wallet-wrapper{
  width: 690px;
  margin-left: 30px;
  padding-left: 40px;
  margin-top: 36px;
  border-radius: 4px;
}
.city-name{
  margin-top: 30px;
  font-size: 30px;
  font-family: PingFang SC;
  line-height: 36px;
}
.city-label{
  display: flex;
  flex-direction: row;
  margin-top: 18px;
  margin-bottom: 30px;
}
.city-label-name{
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.city-label-count{
  font-size: 36px;
   margin-top: 18px;
}
.operate{
  width: 690px;
  height: 60px;
  margin-left: -40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(233,233,233,1);
}
.operate-transfer{
  opacity: 1;
  font-size: 28px;
  font-family: PingFang SC;
  color: rgba(44,177,156,1);
  line-height: 36px;
}
.operate-put{
  font-size: 28px;
  font-family: PingFang SC;
  color: rgba(237,91,20,1);
  line-height: 36px;
}
.operate-account{
  font-size: 28px;
  font-family: PingFang SC;
  line-height: 36px;
}
</style>
<script>
import SideBar from '../../component/sidebar.vue'
import TabBar from '../../component/tabbar.vue'
const net = require('../../utils/http.js')
export default {
  name: '',
  data() {
    return {
      user_wallets:[],
    }
  },
  components: {SideBar,TabBar},
  created() {
    this.get_users_wallet()
  },
  methods: {
      onTabTo(_result){
        const index = _result.data.key;
        this.$emit('page',index)
      },
     toggleSidebar(){
      this.$refs.sidebar.openLeftPopup()
      },
      get_users_wallet(){
        net.get('wallet/listUserWalletInfo',{},(res)=>{
          this.user_wallets = res.result
        })
      },
      turn_in(name){
        this.push('root:pages/wallet/transfer.js',{name:name,wallet_types:this.user_wallets})
      },
      turn_out(name,companyName){
         this.push('root:pages/wallet/vent.js',{name:name,companyName:companyName,wallet_types:this.user_wallets})
      },
      record(data){
        this.push('root:pages/wallet/bill.js',{wallet:data})
      }
    }

}
</script>
